<template>
<!--    发现音乐页面-->
    <div class="discovery">
<!--        轮播图区域-->
        <el-carousel :interval="4000" type="card" height="180px">
            <el-carousel-item v-for="(item,index) in bannerlist" :key="index">

                <img :src="item.imageUrl" style="width:500px ;height: 150px">

            </el-carousel-item>
        </el-carousel>

<!--        推荐歌单区域-->
        <div style="color: #333333"><h2>推荐歌单</h2></div>
        <div class="recommend">
            <div v-for="(item,index) in recommendList" class="recommenditem" :key="index" @click="toplaylist(item.id)">
                <img :src="item.picUrl" style="width: 160px;height: 140px;border-radius: 5px;">
                <div style="font-size: 15px;color: #333333">{{item.name}}</div>
            </div>
        </div>



<!--        最新音乐区域-->
        <div style="color: #333333"><h2>最新音乐</h2></div>
        <div class="newmusic">
            <div v-for="(item,index) in newmusicList" class="newmusicitem" @click="playmusic(item)" :key="index">
                <div class="newmusicimg"> <img :src="item.picUrl" style="height: 80px;width: 80px;border-radius: 5px;"></div>

                <div style="margin: 3px">
                    <div style="font-size: 20px;height: 30px; color:black"><a href="#">{{item.name}}</a></div>
                    <div style="font-size: 13px"><a href="#">{{item.song.artists[0].name}}</a></div>

                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "discovery",
        data(){
            return{
               bannerlist:[],
                recommendList:[0,1,2,3,4,5,6,7,8],
                newmusicList:[],

            }
        },
        created() {
            //获取轮播图图片
            this.banners();
            this.recommends();
            this.newmusics();


        },
        methods:{
            // 请求轮播图图片
            banners(){
                axios({
                    url:'https://autumnfish.cn/banner',
                    method: 'get',
                    params:{
                        pc:0
                    }
                }).then(res=>{
                    this.bannerlist=res.data.banners;

                },err=>{
                    console.log(err)
                })
            },
            // 请求推荐歌单数据
            recommends(){
                axios({
                    method: 'get',
                    url:' https://autumnfish.cn/personalized',
                    params: {
                        limit:10
                    }
                }).then(res=>{
                    this.recommendList=res.data.result;
                    // console.log(this.recommendList)

                },err=>{
                    console.log(err)
                })
            },
            // 获取最新音乐数据
            newmusics(){
                axios({
                    method:'get',
                    url:'https://autumnfish.cn/personalized/newsong',
                    params:{}
                }).then(res=>{
                    console.log(res);
                    this.newmusicList=res.data.result;
                },err=>{
                    console.log(err)
                })
            },
            // 获取当前点击播放音乐的地址
            playmusic(item){
                axios({
                    method:'get',
                    url:' https://autumnfish.cn/song/url',
                    params:{
                        id:item.id
                    }
                }).then(res=>{
                   this.$store.commit('turnmusicurl',res.data.data[0])

                },err=>{
                    console.log(err)
                })
                let min=parseInt(item.song.duration/1000/60)
                let sec=parseInt((item.song.duration/1000)%60)
                if(min<10){
                    min='0'+min
                }
                if(sec<10){
                    sec='0'+sec
                }
                item.song.duration=min+":"+sec
                this.$store.commit('addAllMusic',item.song)
                console.log(this.$store.state.allMusic)
                console.log(this.$store.state.collectionMusicList)


            },
            toplaylist(id){
                this.$router.push({
                    // path:'/playlist/'+id
                    path:`/playlist/${id}`
                })

            }
        }


    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .recommend{
        height: 400px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-between;
        margin: 20px;
        padding-bottom: 100px;
    }
    .recommenditem{
        width: 180px;
        height: 180px;


    }
    .newmusic{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 20px;
    }
    .newmusicitem{
        width: 50%;
        height: 100px;
       display: flex;

    }
    .newmusicimg:hover{
        cursor:pointer
    }
    .recommenditem:hover{
        cursor:pointer
    }
</style>